<template>
	<view class="container"><!-- 页面 -->
		<image class="head_icon" :src="icon" style="width: 100px; height: 100px;"></image><!-- 头像 -->
		<text class="username">{{username}}</text><!-- 用户名 -->
		<view style="width: 100%;"><!-- 底部容器 -->
			<view class="entries"><!-- 入口容器 -->
				<view class="entry"><!-- 入口项 -->
					<text class="entry_text">个人信息</text><!-- 入口项文字 -->
					<image class="entry_arrow" src="/static/more.png" style="width: 50px; height: 50px;"></image><!-- 入口图标 -->
				</view> 
				<view class="entry">
					<text class="entry_text">订单列表</text>
					<image class="entry_arrow" src="/static/more.png" style="width: 50px; height: 50px;"></image>
				</view>
				<view class="entry">
					<text class="entry_text">修改密码</text>
					<image class="entry_arrow" src="/static/more.png" style="width: 50px; height: 50px;"></image>
				</view>
				<view class="entry">
					<text class="entry_text">意见反馈</text>
					<image class="entry_arrow" src="/static/more.png" style="width: 50px; height: 50px;"></image>
				</view>
			</view>
			<button type="primary" style="margin: 0 20px;">退出</button><!-- 按钮 -->
		</view>
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				icon:'/static/logo.png',
				username:"李博文"
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.container{
		display: flex; /*设置容器为弹性布局容器*/
		flex-direction: column; /*内部组件主轴从上到下排布*/
		align-items: center; /*内部组件交叉轴水平居中*/
		width: '100%';
		padding-top: 10%;
	}
	.entries{
		width: '90%';
		padding: 20px;
	}
	.entry{
		width: '90%';
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 60px;
		justify-content: space-between;
		border-top: 1px solid #ccc;
	}
	.entry:last-child{
		border-bottom: 1px solid #ccc;
	}
	.entry text{
		font-size: 24px;
	}
</style>
